<template>
  <div class="detail">
    <SubHeader :title="playlist.name"></SubHeader>
    <!-- 图片区域 -->
    <DetailTop :path="playlist.coverImgUrl" ref="top"></DetailTop>
    <!-- 歌单区域 -->
    <div class="detailBottom">
      <scrollView ref="scrollview">
        <DetaildBottom :tracks="playlist.tracks"></DetaildBottom>
      </scrollView>
    </div>
  </div>
</template>

<script>
import SubHeader from '../components/SubHeader'
import DetailTop from '../components/DetailTop'
import DetaildBottom from '../components/DetaildBottom'
import scrollView from '@/components/scrollView'
import { ApiGetDetail, ApiGetAlbum } from '@/api/index'
export default {
  components: {
    SubHeader,
    DetailTop,
    DetaildBottom,
    scrollView
  },
  data () {
    return {
      playlist: {}
    }
  },
  methods: {
    // 获取歌单详情
    async getPlaylist () {
      const res = await ApiGetDetail({
        id: this.$route.params.id
      })
      this.playlist = res.playlist
    },
    // 获取专辑列表
    async getAlbum () {
      const res = await ApiGetAlbum({
        id: this.$route.params.id
      })
      console.log(res)
      this.playlist = {
        name: res.album.name,
        coverImgUrl: res.album.picUrl,
        tracks: res.songs
      }
    }
  },
  created () {
    // 判断类型专辑还是歌单
    if (this.$route.params.type === 'Personalized') {
      this.getPlaylist()
    } else if (this.$route.params.type === 'album') {
      this.getAlbum()
    }
  },
  mounted () {
    // 获取元素的默认高度
    const defultHeight = this.$refs.top.$el.offsetHeight
    // 监听滚动的值
    this.$refs.scrollview.scrolling((offsetY) => {
      // 如果offsetY小于0向上滚动 大于0 像下滚动 上滚图片模糊 下滚图片放大
      if (offsetY < 0) {
        // 向上滚动 图片放大 通过scale scale>1 放大 <1缩小 默认是1
        // math.abs 绝对值
        // const scale = 20 * Math.abs(offsetY) / defultHeight
        // this.$refs.top.$el.style.filter = `blur(${scale}px)`
        const scale = Math.abs(offsetY) / defultHeight
        this.$refs.top.changeMask(scale)
      } else {
        const scale = 1 + offsetY / defultHeight
        // 通过transfrom赋值
        this.$refs.top.$el.style.transform = `scale(${scale})`
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @include bg_sub_color();
}
.detailBottom {
  position: fixed;
  top: 500px;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
